import React from "react";
import { Link, Outlet, useParams } from "react-router-dom";

export default function List() {
  const data = [
    { id: 1, name: "d1" },
    { id: 2, name: "d2" },
  ];

  return (
    <div className="about">
      <h1>List</h1>
      {data.map((item) => (
        <Link
          style={{ marginRight: "15px" }}
          to={`/list/${item.id}`}
          key={item.id}
        >
          detail {item.name}
        </Link>
      ))}

      {/* 展示子页面的内容 */}
      <Outlet></Outlet>
    </div>
  );
}
